<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="400" height="500"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Set canvas background to white
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Center coordinates
  const cx = canvas.width / 2;
  const cy = canvas.height / 2;

  // Parameters
  const L = 120; // Pixel length for L
  const massRadius = 5;
  const forceLength = 100;
  const lineWidth = 2;
  const labelOffset = 35;
  const fontSize = '28px';
  const font = `italic ${fontSize} 'Times New Roman'`;

  // Set common drawing styles
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = lineWidth;

  // 1. Draw the vertical line (light rope)
  ctx.beginPath();
  ctx.moveTo(cx, cy - L);
  ctx.lineTo(cx, cy + L);
  ctx.stroke();

  // 2. Draw the masses and the midpoint
  // Top mass
  ctx.beginPath();
  ctx.arc(cx, cy - L, massRadius, 0, 2 * Math.PI);
  ctx.fill();

  // Bottom mass
  ctx.beginPath();
  ctx.arc(cx, cy + L, massRadius, 0, 2 * Math.PI);
  ctx.fill();

  // Midpoint
  ctx.beginPath();
  ctx.arc(cx, cy, massRadius, 0, 2 * Math.PI);
  ctx.fill();

  // 3. Draw the force vector F
  const arrowStartX = cx;
  const arrowStartY = cy;
  const arrowEndX = cx + forceLength;
  const arrowEndY = cy;
  const headlen = 15; // length of arrowhead in pixels
  
  // Line part of the arrow
  ctx.beginPath();
  ctx.moveTo(arrowStartX, arrowStartY);
  ctx.lineTo(arrowEndX, arrowEndY);
  ctx.stroke();

  // Arrowhead (filled triangle)
  ctx.beginPath();
  ctx.moveTo(arrowEndX, arrowEndY);
  ctx.lineTo(arrowEndX - headlen, arrowEndY - headlen * 0.5);
  ctx.lineTo(arrowEndX - headlen, arrowEndY + headlen * 0.5);
  ctx.closePath();
  ctx.fill();

  // 4. Draw the labels
  ctx.font = font;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // Labels m
  ctx.fillText('m', cx - labelOffset, cy - L);
  ctx.fillText('m', cx - labelOffset, cy + L);

  // Labels L
  ctx.fillText('L', cx - labelOffset, cy - L / 2);
  ctx.fillText('L', cx - labelOffset, cy + L / 2);

  // Label F
  ctx.fillText('F', arrowEndX + 25, arrowEndY);

</script>
</body>
</html>